<template>
    <div>
        <img height="1" width="1" style="display:none" :src="`https://www.facebook.com/tr?id=${pixel_code}&ev=PageView&noscript=1`" />
        <div class="recharge_content" >
		    <RechargeComp :isPaymentPage="true" :setPayResult="setPayResult" :isEconomical="true"  :pay_info="pay_info" :closeBox="closeBox" :price="price" :openDialog="openDialog" :goHome="goHome"/>
		</div>

        <div class="pay_result" v-show="showPayResultStore.isPayResult">
            <div class="close" @click="close_pay_result"></div>
            <iframe :src="pay_result_src" width="100%" height="100%" frameborder="0" ></iframe>
        </div>
    </div>
</template>

<script setup>
import RechargeComp from "@/views/Recharge/Index/RechargeComp/index.vue"
import {useShowPayResult} from "@/store/modules/isShowPayResult"
import {useRoute} from "vue-router"
import { useUserInfoStore } from '@/store/modules/user_info/index';
const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo)
import axios from '@/utils/api'
const route = useRoute()

let {gameId,pixel_code,userId,Roleid,Serverid,Ctext,Cp_orderid,Sku} = toRefs(route.query)
watch(() => route.query,(newQuery, oldQuery) => {
    console.log('Query 参数变化了:', newQuery)
    window.location.reload();
    }
)

!function (f, b, e, v, n, t, s) {
      if (f.fbq) return; n = f.fbq = function () {
        n.callMethod ?
        n.callMethod.apply(n, arguments) : n.queue.push(arguments)
      };
      if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
      n.queue = []; t = b.createElement(e); t.async = !0;
      t.src = v; s = b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t, s)
}(window, document, 'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', pixel_code);


let price = ref(0)
const data = {
    userId:userId.value,
    gameId:gameId.value,
    roleId: Roleid.value,
    serverId: Serverid.value.toString(),
    cText: Ctext.value,
    cp_orderId: Cp_orderid.value,
    sku: Sku.value
};

let pay_info = reactive(data)	
console.log(pay_info, 123456333);

// 将 data 对象转换为查询参数字符串
const queryString = Object.keys(data)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
    .join('&');

// 拼接完整的 URL
const url = `${window.baseUrl}/index.php/ios/pc/gameRecharge?${queryString}`;

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // true 表示异步请求
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功
        const res = JSON.parse(xhr.responseText);
        console.log(res, 123456);
        pay_info = res.data;
        price.value = pay_info.usd;

        fbq('track', 'AddToCart', { value: price.value, currency: 'USD', time: new Date().getTime() });
        console.log('发起支付-AddToCart', fbq);
    } else {
        // 请求失败
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.onerror = function () {
    // 网络错误
    console.error('Network error');
};

xhr.send(); // GET 请求不需要发送请求体



const pay_result_src = ref('')
const showPayResultStore = useShowPayResult()
const setPayResult = (url)=>{
    showPayResultStore.showPayResult()
    pay_result_src.value = url
    console.log(url,33333333333,showPayResultStore.isPayResult);
    
}
const close_pay_result = ()=>{
    showPayResultStore.unPayResult()
    pay_result_src.value = ''
}

const closeBox = () => {
    
};
const openDialog = () => {
    
};
const goHome = () => {
    
};

</script>

<style lang="less" scoped>
@media (min-width: 1025px) {
    .pay_result{
        background-color: #fff;
        width: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        height: 700px;
        border-radius: 15px;
        iframe{
            border-radius: 15px;
            position: relative;
            z-index: 99;
            overflow: hidden;
        }
        .close{
            z-index: 999;
        }
        .close:hover {
            cursor: pointer;
            background-image: url();
        }
    }
    
}
@media (max-width: 1024px) {
    .pay_result{
        background-color: #fff;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        height: var(--bodyPay);
        overflow: auto;
        iframe{
            position: relative;
            z-index: 99;
        }
        .close{
            z-index: 999;
        }
    }
}
</style>